<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="注册用户" name="fourth">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'fourth'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="活跃用户" name="second">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'second'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="登录用户" name="third">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'third'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="累计数据" name="first">
        <span style="color:#409EFF">
          累计注册数仅统计通过对应产品注册的账号，幕童系产品的账号可以通用，
        </span>
        <span style="color:#409EFF;font-weight:700">
          故单一产品的累计登录用户数可能大于通过该产品注册的累计注册数
        </span>
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'first'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="用户地区分布" name="fifth">
        <user-data-map></user-data-map>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import StatisticsData from 'comp/StatisticsData';
  import UserDataMap from '@/views/DataStatistics/UserDataMap';
  import { fieldCover } from '@/utils/field';
  export default {
    components: {
      StatisticsData,
      UserDataMap
    },
    data() {
      return {
        activeName: 'fourth',
        coreData: {},
        coreData1: {},
        xAxis: [],
        yAxis: [],
        series: [],
        legend: [],
        flag: false,
        tableLoadData: [],
        tableHeadConfig: [],
        modelVal: '',
        startTime: '',
        endTime: '',
      };
    },
    watch: {
      modelVal(newval) {
        this.startTime = newval.dataVal[0];
        this.endTime = newval.dataVal[1];
        var workType = newval.workType;
        var workType2 = newval.workType2;
        this.handleClick(this.startTime, this.endTime, workType.toString(), workType2.toString());
      },
    },
    methods: {
      async handleClick(startTime, endTime, workType, workType2) {
        this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
        this.flag = false;
        this.tableLoadData = [];
        this.tableHeadConfig = [];
        this.legend = [];
        this.xAxis = [];
        this.yAxis = [];
        this.series = [];

        if (this.activeName == 'first') {
          await this.$service.StatisUserCore({ pt: 'kt' }).then((res) => {
            this.coreData.kt = res;
          });
          await this.$service.StatisUserCore({ pt: 'jm' }).then((res) => {
            this.coreData.jm = res;
          });
          await this.$service
            .StatisUserCoreChart({
              startDate: startTime,
              endDate: endTime,
              pt: workType,
              os: workType2,
            })
            .then((res) => {
              console.log(res);
              this.tableLoadData = res.dayData;
              this.tableHeadConfig = this.$ENUMS.coreUser;
              this.legend = this.$ENUMS.userLegend;
              this.yAxis = [{ type: 'value' }];
              var Cnts = [[], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.userCnt);
                Cnts[1].push(item.logCnt);
                Cnts[2].push(item.regCnt);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                };
                this.series.push(serie);
              });
              this.flag = true;
            })
            .catch((err) => {});
        }
        if (this.activeName == 'second') {
          await this.$service.StatisUserActive({ pt: 'kt' }).then((res) => {
            this.coreData.kt = res;
          });
          await this.$service.StatisUserActive({ pt: 'jm' }).then((res) => {
            this.coreData.jm = res;
          });
          this.$service
            .StatisUserActiveChart({
              startDate: startTime,
              endDate: endTime,
              pt: workType,
              os: workType2,
            })
            .then((res) => {
              fieldCover(res.otherData, res.dayData);
              this.tableLoadData = [...res.dayData, ...res.otherData];
              this.tableHeadConfig = this.$ENUMS.activeUser;
              this.legend = this.$ENUMS.activeLegend;
              this.yAxis = [{ type: 'value' }];
              var Cnts = [[], [], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.dauCnt);
                Cnts[1].push(item.ndauCnt);
                Cnts[2].push(item.wauCnt);
                Cnts[3].push(item.mauCnt);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                };
                this.series.push(serie);
              });
              this.flag = true;
            })
            .catch((err) => {});
        }
        if (this.activeName == 'third') {
          await this.$service.StatisUserLogin({ pt: 'kt' }).then((res) => {
            this.coreData.kt = res;
          });
          await this.$service.StatisUserLogin({ pt: 'jm' }).then((res) => {
            this.coreData.jm = res;
          });
          this.$service
            .StatisUserLoginChart({
              startDate: startTime,
              endDate: endTime,
              pt: workType,
              os: workType2,
            })
            .then((res) => {
              this.tableLoadData = [...res.dayData, ...res.otherData];
              this.tableHeadConfig = this.$ENUMS.loginUser;
              this.legend = this.$ENUMS.loginLegend;
              var Cnts = [[], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.userCnt);
                Cnts[1].push(item.ratio);
                Cnts[2].push(item.newCnt);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                  yAxisIndex: index == 1 ? Cnts.length - 1 : null,
                };
                var y = {
                  type: 'value',
                  min: 0,
                  position: Cnts.length == index + 1 ? 'right' : 'left',
                };
                this.yAxis.push(y);
                this.series.push(serie);
                console.log(serie);
              });
              fieldCover(res.otherData, res.dayData);
              this.flag = true;
            })
            .catch((err) => {});
        }
        if (this.activeName == 'fourth') {
          await this.$service.StatisUserReg({ pt: 'kt' }).then((res) => {
            this.coreData.kt = {};
            this.coreData.kt.newRegCnt = res.newCnt;
            this.coreData.kt.weekRegCnt = res.weekCnt;
            this.coreData.kt.monthRegCnt = res.monthCnt;
            this.coreData.kt.totalCnt = res.totalCnt;
          });
          await this.$service.StatisUserReg({ pt: 'jm' }).then((res) => {
            this.coreData.jm = {};
            this.coreData.jm.newRegCnt = res.newCnt;
            this.coreData.jm.weekRegCnt = res.weekCnt;
            this.coreData.jm.monthRegCnt = res.monthCnt;
            this.coreData.jm.totalCnt = res.totalCnt;
          });
          console.log(this.coreData);
          this.$service
            .StatisUserRegChart({
              startDate: startTime,
              endDate: endTime,
              pt: workType,
              os: workType2,
            })
            .then((res) => {
              fieldCover(res.otherData, res.dayData);
              this.tableLoadData = [...res.dayData, ...res.otherData];
              this.tableHeadConfig = this.$ENUMS.regUser;
              this.legend = this.$ENUMS.regLegend;
              this.yAxis = [{ type: 'value' }];
              var Cnts = [[], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.newCnt);
                Cnts[1].push(item.weekCnt);
                Cnts[2].push(item.monthCnt);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                };
                this.series.push(serie);
                console.log(serie);
              });
              this.flag = true;
            })
            .catch((err) => {});
        }
      },
    },
  };
</script>
<style lang="less" scoped></style>
